<template>
  <div id="uploadTopic">
    <el-container>
      <el-main style="height: 640px">
        <el-card class="t-box-card">
          <div slot="header" style="height: 20px">
            <el-button style="float: left; padding: 3px 0" type="text">上传题目</el-button>
          </div>
          <div slot="header">
          </div>
          <el-form ref="uploadForm" :model="uploadForm" :rules="uploadRules" status-icon label-width="80px">
            <el-form-item label="题型" prop="topicTypeId">
              <el-radio-group v-model="uploadForm.topicTypeId"  style="float:left;margin-top: 13px;margin-left: 30px">
                <el-radio :label="o.id" v-for="o in typeList" :key="index" style="color: #67C23A">{{o.value}}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="科目" prop="objectId">
              <el-radio-group v-model="uploadForm.objectId"  style="float:left;margin-top: 13px;margin-left: 30px">
                <el-radio :label="o.id" v-for="o in objectList" :key="index"style="color: #E6A23C">{{o.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度" prop="difficultyLevelId">
              <el-radio-group v-model="uploadForm.difficultyLevelId"  style="float: left;margin-top: 13px;margin-left: 30px">
                <el-radio :label="o.id" v-for="o in difficultList" :key="index" style="color: #67C23A">{{o.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题目标题" prop="title">
              <el-input v-model="uploadForm.title" placeholder="标题要贴合题目哦" style="width: 900px"></el-input>
            </el-form-item>
            <el-form-item label="题目内容" prop="content">
              <el-input type="textarea" v-model="uploadForm.content" placeholder="快输入内容吧" style="width: 900px"></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="answer">
              <el-input type="textarea" v-model="uploadForm.answer" placeholder="答案可以不填写" style="width: 900px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="uploadTopicButton('uploadForm')">立即上传</el-button>
              <el-button @click="resetForm('uploadForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "UploadTopic",
  data(){
    //标题验证
    const validTitle = (rule, value, callback) => {
      //const reg = /^[a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('请输入题目标题'))
      }
      /*else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      } */
      else {
        callback()
      }
    };
    //题目内容验证
    const validContent = (rule, value, callback) => {
      //const reg = /^[a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('请输入题目内容'))
      }
      /*else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      } */
      else {
        callback()
      }
    };
    //答案验证
    const validAnswer = (rule, value, callback) => {
      //const reg = /^[a-zA-Z0-9]+$/
      /*if (value === '') {
        callback(new Error('请输入题目内容'))
      }
      else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      }
      else {
        callback()
      }*/
    };
    return{
      uploadForm:{
        topicTypeId: '',
        objectId: '',
        difficultyLevelId: '',
        title: '',
        content: '',
        answer:'',
      },
      difficultList:[{
        id : '',order: '',type: '',value: ''
      }],
      objectList:[{
        id : '',order: '',type: '',value: ''
      }],
      typeList:[{
        id : '',order: '',type: '',value: ''
      }],
      //前端验证
      uploadRules: {
        topicTypeId: [
          { required:true, message: '请选择题目类型', trigger: 'change' }
        ],
        objectId: [
          { required:true, message: '请选择科目', trigger: 'change' }
        ],
        difficultyLevelId: [
          { required:true, message: '请选择难度', trigger: 'change' }
        ],
        title: [
          { validator: validTitle, trigger: 'blur' }
        ],
        content: [
          { validator: validContent, trigger: 'blur' }
        ],
        /*answer: [
          { validator: validAnswer, trigger: 'blur' }
        ],*/
      }
    }
  },
  methods:{
    //获取题型、科目、难度
    getTopicAbout(){
      this.$myAxios('/uploadTopic/getTopicAboutJ','post',null,resp=>{
        this.difficultList=resp.data.data.difficultList
        this.objectList=resp.data.data.objectList;
        this.typeList=resp.data.data.typeList;
        console.log(resp);
      })
    },
    //上传按钮
    uploadTopicButton(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) { //表单验证通过情况
          this.$myAxios('/uploadTopic/goUploadTopicJ','post',this.uploadForm,resp=>{
            console.log(resp);
            this.$message({
              message: '添加题目成功',
              type: 'success'
            });
          })
        } else { //表单验证没通过情况
          console.log('error submit!!');
          return false;
        }
      });
    },
    //重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    this.getTopicAbout();
  }
}
</script>

<style scoped>

</style>